<template>
    <div>
        <div style="margin-top:20px" v-show="loading">
            <van-loading size="24px" vertical color="#0094ff">加载中...</van-loading>
        </div>
        
        <div class="detail" v-show="show">
            <div class="back" @click="back">
                <van-icon name="arrow-left" />
            </div>
            <h3 class="top">订单已支付，等待发货</h3>
            <div class="out-card">
                <div class="adress">
                    <div class="adress-left" style="float: left">
                        <van-icon name="location" size="22px" color="#fff" />
                    </div>
                    <div class="adress-right">
                        <h3>
                            {{ data.ordermain.orderperson
                            }}<span>{{ data.ordermain.receivertelno }}</span>
                        </h3>
                        <p>{{ data.ordermain.receiveraddress }}</p>
                    </div>
                </div>
            </div>
            <div class="out-card">
                <p class="tip">订单明细</p>
                <div
                    v-for="(shop, i) of data.orderitems"
                    :key="i"
                    style="margin-top: 8px"
                >
                    <van-card
                        :num="shop.productnum"
                        :title="shop.productname"
                        :thumb="shop.img"
                    >
                        <template #desc>
                            <van-button
                                size="mini"
                                type="warning"
                                plain
                                style="margin-top: 4px"
                                >包邮</van-button
                            >
                        </template>
                        <template #price>
                            <span class="price">￥{{ shop.money }}</span>
                        </template>
                    </van-card>
                </div>
                <div class="yf">邮费<span>￥0</span></div>
                <van-divider />
                <div class="sumMone">
                    合计:<span>￥{{ data.ordermain.totalmoney }}</span>
                </div>
            </div>
            <van-cell-group inset>
                <p class="tip" style="padding: 10px 15px 10px 15px">发票</p>
                <van-cell title="发票类型" :value="data.receipt.receipttype" />
                <van-cell title="发票抬头" :value="data.receipt.receiptitle" />
                <van-cell title="单位税号" :value="data.receipt.taxpaynumber" />
                <van-cell title="注册地址" :value="data.receipt.bankaddress" />
                <van-cell title="注册电话" :value="data.receipt.banktelno" />
                <van-cell title="开户银行" :value="data.receipt.bankname" />
                <van-cell title="银行账号" :value="data.receipt.account" />
            </van-cell-group>

            <van-cell-group inset>
                <p class="tip" style="padding: 10px 15px 10px 15px">订单信息</p>
                <van-cell title="订单号码" :value="data.ordermain.Id" />
                <van-cell title="下单时间" :value="data.ordermain.ordertime" />
                <van-cell title="支付方式" value="微信支付" />
            </van-cell-group>
            <div style="height: 15px"></div>
        </div>
    </div>
</template>
<script>
import { Toast } from "vant";
export default {
    data() {
        return {
            loading: true,
            show:false,
            data: {
                list: [],
                receipt: {},
                ordermain: {},
            },
        };
    },
    mounted() {
        this.getData(this.$route.query.id);
    },
    methods: {
        back() {
            this.$router.back();
        },
        async getData(val) {
            var datas = {
                ordermainId: val,
            };
            var res = await this.$API.my.OrderDetails.get(datas);
            this.loading = false
            if (res.type == 1) {
                this.show = true
                for (let list of res.value.rows[0].orderitems) {
                    list.img = "img/" + list.productno + ".png";
                }
                this.data = res.value.rows[0];
            }else{
                this.show = false
                Toast.fail(res.message);
            }
        },
    },
};
</script>
<style scoped>
.van-tabbar {
    display: none;
}
.van-loading--vertical {
    justify-content: center;
    height: 300px;
}
.yf {
    margin: 15px 0;
}
.yf span {
    float: right;
}
.sumMone span {
    color: red;
    font-size: 15px;
}
</style>